<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学习之路</title>
	<link rel="shortcut icon" type="image/x-icon" href="http://okowaawz9.bkt.clouddn.com/favicon.ico" media="screen" />
</head>
<style>
*{
	margin:0px;
	padding: 0px;
}
.active{
	background: #ccc;
}
	ul{
		width: 300px;
		height: 400px;
		background: #ddd;
		margin: 100px auto;
	}
	ul li{
		width: 100px;
		height: 100px;
		float: left;
		list-style: none;
		box-sizing: border-box;
		background: skyblue;
		text-align: center;
		border: 1px solid #000;
		padding: 20px;
	}
	.text{
		padding: 20px;
		width: 300px;
		height: 100px;
		margin: -100px auto;
		background: #ccc;
		text-align: center;
		box-sizing: border-box;
	}
	.blackToFirst{
			width: 50px;
			height: 100px;
			background: #ccc;
			display: inline-block;
			position: fixed;
			right: 50px;
			bottom: 50px;
		  
		}
		.btf{
			width: 50px;
			height: 58px;
			background: url(http://okowaawz9.bkt.clouddn.com/iconFloat.png) left -59px no-repeat;
		}
		.blackToFirst a{
			display: inline-block;
			width: 50px;
			height: 58px;
			background: rgba(255,255,255,0.5);
		}
		.blackToFirst a:hover{
			display: inline-block;
			width: 50px;
			height: 58px;
			background: rgba(125,125,125,0.5);
		}
		.bts{
			width: 50px;
			height: 58px;
			background: url(http://okowaawz9.bkt.clouddn.com/iconFloat.png) left -118px no-repeat;
		}
</style>
<script>
	window.onload=function ()
	{
		var arr=[
			'一月踏雪寻诗,烹茶观雪,吟诗作乐。',
			'二月寒夜寻梅,赏灯猜谜。',
			'三月闲厅对弈。',
			'四月曲池荡千,芳草欢嬉。',
			'五月韵华斗丽,芬芳满园。',
			'六月池亭赏鱼,池边竹林飒飒作响。',
			'七月菏塘采莲,泛舟湖上。',
			'八月桐荫乞巧。',
			'九月琼台赏月。',
			'十月深秋赏菊。',
			'十一月文阁刺绣。',
			'十二月围炉博古。'

		];
		var oDiv=document.getElementById('tab');
		var aLi=document.getElementsByTagName('li');
		var oTxt=oDiv.getElementsByTagName('div')[0];
		for(var i=0; i<aLi.length;i++)
		{
			aLi[i].index=i;
			aLi[i].onmouseover=function ()
			{
				for(var i=0; i<aLi.length;i++)
				{
					aLi[i].className=" ";
				}
				this.className='active';
				oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
			};
		}
	};
</script>
<body>
<div id="tab" class="calender">
	<ul>
		<li class="active"><h2>1</h2><p>JAN</p></li>
		<li><h2>2</h2><p>FER</p></li>
		<li><h2>3</h2><p>MAR</p></li>
		<li><h2>4</h2><p>APR</p></li>
		<li><h2>5</h2><p>MAY</p></li>
		<li><h2>6</h2><p>JUN</p></li>
		<li><h2>7</h2><p>JUL</p></li>
		<li><h2>8</h2><p>AUG</p></li>
		<li><h2>9</h2><p>SEP</p></li>
		<li><h2>10</h2><p>OCT</p></li>
		<li><h2>11</h2><p>NOV</p></li>
		<li><h2>12</h2><p>DEC</p></li>
	</ul>
	<div class="text">
	<h2>1月活动</h2>
	<p>快过年了，大家一起嗨皮啊~</p>
</div>
</div>
	<div class="blackToFirst">
		<div class="bts" title="回到顶部"><a href="#"></a></div>
		<div class="btf" title="回到首页"><a href="index.html"></a></div>
	</div>
</body>
</html>
